<template>
  <div class="mainBox">
    <div class="bottomBox">
      <div class="bottomListBox">
        <div class="flex box-row">
          <div class="flex-1">
            <el-form ref="queryForm" :inline="true" label-width="100px" class="mt20" :model="queryParams">
              <el-form-item label="员工状态">
                <el-select v-model="queryParams.rule_status" placeholder="请选择状态" style="width: 200px; height: 36px">
                  <el-option v-for="item in jobstatusoptions" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 72px; height: 36px; font-size: 16px" type="primary" size="mini" color="#01509f" @click="handleQuery">搜索</el-button>
                <el-button style="width: 72px; height: 36px; font-size: 16px" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="flex flex-align-center">
            <el-button type="primary" @click="gotoQianshu" style="height: 36px; font-size: 17px">
              <img src="@/assets/image/cf/fei.png" alt="发起签署" class="button-icon" />
              发起签署
            </el-button>
          </div>
        </div>

        <el-table :data="datalist" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="加载中..." header-row-class-name="table-header">
          <el-table-column label="规章制度名称" align="center" prop="task_name" />
          <el-table-column label="生效时间" align="center" prop="effect_time" />
          <el-table-column label="状态" align="center">
            <template #default="scope">
              <el-tag type="success" v-if="Number(scope.row.rule_status) == 1">生效中</el-tag>
              <el-tag type="warning" v-if="Number(scope.row.rule_status) == 0">未生效</el-tag>
              <el-tag v-if="Number(scope.row.rule_status) == 2" type="danger">已失效</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="280">
            <template #default="scope">
              <el-button class="selfColor" text icon="View" @click="gotofile(scope.row)">查看文件</el-button>
              <el-button class="selfColor" text icon="EditPen" @click="gotodetail(scope.row)" style="">签署详情</el-button>
              <el-button class="selfColor" style="color: #ff4345" v-if="Number(scope.row.rule_status) == 1" text icon="CircleClose" @click="gotoShengxiao(scope.row, 2)">失效</el-button>
              <el-button
                class="selfColor"
                style="color: #01509f"
                v-if="Number(scope.row.rule_status) == 0 || Number(scope.row.rule_status) == 2"
                text
                icon="CircleCheck"
                @click="gotoShengxiao(scope.row, 1)"
              >
                生效
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" />
      </div>
    </div>
    <el-dialog v-model="open" title="签署详情" width="60%" :before-close="handleClose">
      <el-table :data="list" border header-row-class-name="table-header">
        <el-table-column label="员工姓名" align="center" prop="join_name" />
        <el-table-column label="手机号" align="center" prop="join_phone" />
        <el-table-column label="签署情况" align="center" prop="job_status">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.sign_time">已签署</el-tag>
            <el-tag type="error" v-else>未签署</el-tag>
          </template>
        </el-table-column>
        e
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount, computed } from "@/TUIKit/adapter-vue";
  import Pagination from "@/components/Pagination.vue";
  import type { ElMessage, ElMessageBox, UploadProps } from "element-plus";
  import { user_list, getRegulationListApi, contractInvalidApi } from "@/api/cf";
  import { UserBaseInfo } from "@/api/user";

  import { useRouter } from "vue-router";
  import { useUserStore } from "@/store/user";
  const router = useRouter();
  const chartRef = ref(null);
  const uploadRef = ref(null);
  const queryParams = ref({ rule_status: "" });
  const pageInfo = ref({ page: 1, limit: 10 });
  const loading = ref(false);
  const open = ref(false);
  const is_batch = ref(false);
  const total = ref(0);
  const form = ref({});
  const insuredTotalData = ref({});
  const list = ref([]);
  const token = localStorage.getItem("token");
  const checklist = ref([]);
  const checkedStatuslist = ref([0, 0, 0, 0, 0, 0]);
  const jobstatusoptions = ref([
    { value: "0", name: "未生效" },
    { value: "1", name: "生效中" },
    { value: "2", name: "已失效" },
  ]);
  let chartInstance = null;

  const gotoQianshu = () => {
    router.push({ name: "qianshu", params: { task_id: "", name: "", status: "", userid: userid.value, usertype: usertype.value } });
  };
  onMounted(() => {
    getInfo();
    // 监听窗口大小变化事件以支持响应式

    getList();
  });

  const iszhuce = ref(false);
  const role_id = ref(0);
  const userid = ref(0);
  const isaddmin = ref(false);
  const usertype = ref(0);
  const info = ref({});
  const getInfo = async () => {
    await UserBaseInfo({}).then(res => {
      //   info.value = res.data;
      role_id.value = res.data.role.role_id;
      // 企业
      if (Number(res.data.role.role_id) === 1) {
        isaddmin.value = true;
        usertype.value = 2;
        userid.value = res.data.info.id;
        if (res.data.info && res.data.info?.account) {
          //认证过
          iszhuce.value = true;
        } else {
          iszhuce.value = false;
        }
      }
      // 个人
      else if (Number(res.data.role.role_id) > 1) {
        userid.value = res.data.userinfo.info_id;
        isaddmin.value = false;
        usertype.value = 1;
        if (res.data.userinfo && res.data.userinfo?.account) {
          //认证过
          iszhuce.value = true;
        } else {
          iszhuce.value = false;
        }
      }
    });
  };

  const gotofile = (row: any) => {
    if (row.file.previewUrl) {
      window.open(row.file.previewUrl, "_blank");
    }
  };

  const handleSelectionChange = val => {
    checklist.value = val;
    console.log(checklist.value.length);
  };
  const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.value.page = page;
    pageInfo.value.limit = size;
    getList();
  };
  const reset = () => {
    form.value.rule_status = "";
    pageInfo.value.limit = 10;
    pageInfo.value.page = 1;
    datalist.value = [];

    getList();
  };
  const handleQuery = () => {
    pageInfo.value.page = 1;
    pageInfo.value.limit = 10;
    list.value = [];
    getList();
  };

  const datalist = ref([]);
  const getList = () => {
    loading.value = true;
    getRegulationListApi(pageInfo.value.page, pageInfo.value.limit, queryParams.value.rule_status).then(res => {
      loading.value = false;
      datalist.value = res.data;

      total.value = res.count;
    });
  };
  const gotodetail = (row: any) => {
    open.value = true;
    list.value = row.join;
  };
  const gotoShengxiao = (row: any, status: number) => {
    if (status == 1) {
      go2(row, status);
    } else {
      go1(row, status);
    }
  };

  const go1 = (row: any, status: number) => {
    const baoti = "请确认,是否失效该" + row.task_name;

    ElMessageBox.confirm(baoti, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      contractInvalidApi(row.Id, status).then(res => {
        ElMessage.success("操作成功");
        handleQuery();
      });
    });
  };

  const go2 = (row: any, status: number) => {
    const baoti = "请确认,是否生效该" + row.task_name;

    ElMessageBox.confirm(baoti, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      contractInvalidApi(row.Id, status).then(res => {
        ElMessage.success("操作成功");
        handleQuery();
      });
    });
  };
</script>

<style lang="scss" scoped>
.el-table {
  font-size: 16px;
  /* 默认大小 */
}

/* 设置表头文字 */
.el-table th {
  font-size: 18px;
}

/* 设置表格内容文字 */
.el-table td {
  font-size: 16px;
}

.button-icon {
  margin-right: 5px;
  width: 25px;
}

.selfColor {
  padding: 5px 0px;
  font-size: 15px;
}

.mainBox {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  // padding: 22px;
  // box-sizing: border-box;

  .topBox {
    background-color: #fff;
    border-radius: 12px;
    padding: 17px;
    box-sizing: border-box;

    .topTitle {
      font-size: 20px;
      font-weight: bolder;
      color: #333;
    }

    .topContent {
      display: flex;
      align-items: flex-start;
      width: 100%;
      padding: 17px 41px 0 41px;
      box-sizing: border-box;

      .zi3 {
        font-size: 16px;
      }

      .num_kuai {
        // width: 30%;
        margin-top: 10px;
        margin-right: 98px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.8s ease, transform 0.8s ease;
        will-change: background-color;
      }

      .checked {
        color: #fff;
        border-radius: 6px;
        padding: 6px 10px;
        width: 92px;
        height: 64px;
        box-sizing: border-box;

        .y1::before {
          display: none;
        }

        .y2::before {
          display: none;
        }

        .y3::before {
          display: none;
        }

        .y4::before {
          display: none;
        }

        .y5::before {
          display: none;
        }

        .y6::before {
          display: none;
        }
      }

      .zi_num {
        font-size: 24px;
        font-weight: bold;
      }

      .y1::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #1864f2;
        margin-right: 5px;
      }

      .y2::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fe5c55;
        margin-right: 5px;
      }

      .y3::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #2ad4ae;
        margin-right: 5px;
      }

      .y4::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ff7b43;
        margin-right: 5px;
      }

      .y5::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #9188e5;
        margin-right: 5px;
      }

      .y6::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #e5c388;
        margin-right: 5px;
      }
    }
  }

  .bottomBox {
    background-color: #fff;
    border-radius: 12px;
    padding: 17px;
    box-sizing: border-box;
    // margin-top: 22px;

    .bottomTopBox {
      padding-bottom: 18px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eaeaea;

      .bottomTitle {
        font-size: 20px;
        color: #333;
        font-weight: bolder;
        flex: 1;
      }

      .bottomRightBox {
        display: flex;
        align-items: center;

        .btnItem1 {
          border-radius: 6px;
          width: 108px;
          height: 36px;
          text-align: center;
          line-height: 30px;
          box-sizing: border-box;
          font-size: 16px;
          // color: #333;
        }

        .btnItem2 {
          border: none;
          border-radius: 6px;
          width: 72px;
          height: 36px;
          text-align: center;
          line-height: 30px;
          box-sizing: border-box;
          font-size: 16px;
        }
      }
    }
  }
}

:deep(.el-table__header) {
  .table-header {
    th {
      font-size: 16px;
      background: #f3f8fb;
      height: 53px;
      color: #6f7070;
      font-weight: normal;
    }
  }
}
</style>
